<template>
  <el-form
    :model="form"
    status-icon
    :rules="rules"
    label-width="100px"
    ref="form"
    class="login_container"
  >
    <h3 class="login_title">用户登录</h3>
    <el-form-item
      label="用户名"
      prop="username"
      class="login_username"
      label-width="80px"
    >
      <el-input
        type="input"
        placeholder="请输入用户名"
        auto-complete="off"
        v-model="form.username"
      ></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password" label-width="80px">
      <el-input
        v-model="form.password"
        type="password"
        auto-complete="off"
        placeholder="请输入密码"
      ></el-input>
    </el-form-item>
    <el-form-item class="login_submit">
      <el-button type="primary" @click="login2" class="login_submit"
        >登录</el-button
      >
    </el-form-item>
  </el-form>
</template>

<script>
// import Mock from "mockjs";

// import { getToken } from '@/api/data';
// import res from '@/api/axios'
import { login } from "@/api/userApi";
import { setToken } from "@/api/userToken";
import { getUser } from "../../api/data";
export default {
  data() {
    return {
      form: {},
      users: [],
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            message: "用户名不能小于3位",
            trigger: "blur",
          },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    login2() {
      // this.users.forEach(item => {
      //   console.log(item);
      //   if (this.form.username == item.username && this.form.password == item.password) {
      //     login({ username: this.form.username, password: this.form.password }).then(res => {
      //       console.log(res);
      //       setToken(res.token.accessToken, res.token.refreshToken)
      //     })

      //   }
      // })
      login({
        username: this.form.username,
        password: this.form.password,
      }).then((res) => {
        console.log(res);
        setToken(res.token.accessToken, res.token.refreshToken);
      });
      this.$router.push({ name: "home" });
    },
    // login() {
    //   getMenu(this.form).then((res) => {
    //     console.log(res);
    //     if (res.code === 20000) {
    //       this.$store.commit('clearMenu')
    //       this.$store.commit('setMenu',res.data.menu)
    //       this.$store.commit('setToken',res.data.token)
    //       // this.$store.commit('addMenu',this.$router)
    //       this.$router.push({name: 'home'})
    //     } else {
    //       this.$message.warning(res.data.message);
    //     }
    //   });
    //   const token = Mock.Random.guid();
    //   this.$store.commit("setToken", token);
    //   this.$router.push({ name: "home" });
    // },
  },
  created: function () {
    // login({ username: "admin", password: "113" }).then(res => {
    //   console.log(res);
    //   setToken(res.token.accessToken, res.token.refreshToken)
    // })
    // refreshToken().then(res => {
    //   console.log(res);
    // })
    // if (refreshToken() != false) {
    //   refreshToken().then(res => {
    //     console.log(res);
    //   })
    // }
    getUser().then((res) => {
      res.forEach((item) => {
        this.users.push(item);
      });
    });
  },
};
</script>

<style lang="less" scoped>
.login_container {
  border: solid 1px;
  border-radius: 15px;
  background-clip: padding-box;
  margin: 180px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background-color: #fff;
  box-shadow: 0 0 25 #cac6c6;
}

.login_title {
  margin: 0 auto 40px auto;
  text-align: center;
  color: rgb(40, 38, 38);
}

.login_submit {
  margin: 10px auto 0 auto;
}
</style>